<template>
    <div>
        <Form ref="pwdInfo" :model="pwdInfo" :rules="ruleValidate" :label-width="80" class="form">
            <FormItem label="旧密码" prop="oldPwd">
                <Input v-model="pwdInfo.oldPwd" placeholder="请填写你的旧密码" class="ipt" type="password"/>
            </FormItem>
            <FormItem label="新密码" prop="newPwd">
                <Input v-model="pwdInfo.newPwd" placeholder="请填写你的新密码" class="ipt" type="password"/>
            </FormItem>
            <FormItem label="确认密码" prop="newPwd1">
                <Input v-model="pwdInfo.newPwd1" placeholder="再次输入新密码" class="ipt" type="password"/>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('pwdInfo')">提交</Button>
                <Button type="info" ghost="ghost" @click="handleReset('pwdInfo')" style="margin-left: 8px" v-has="this.$res.changePassword">重置</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    export default {
        name: 'updatePassword',
        metaInfo: {
            title: '修改密码',
        },
        data() {
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入你的密码'))
                } else if (value !== this.pwdInfo.newPwd) {
                    callback(new Error('两个新密码不一致'))
                } else {
                    callback()
                }
            }
            return {
                pwdInfo: {
                    newPwd: '',
                    newPwd1: '',
                    oldPwd: ''
                },
                ruleValidate: {
                    oldPwd: [
                        {required: true, message: '旧密码不能为空', trigger: 'blur'}
                    ],
                    newPwd: [
                        {required: true, message: '新密码不能为空', trigger: 'blur'},
                        {min: 6, max: 16, message: '密码最小六位，最大十六位', trigger: 'blur'}
                    ],
                    newPwd1: [
                        {required: true, validator: validatePassCheck, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            handleSubmit: function (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$kit.ajaxPut(this.$res.changePassword, {
                            newPassword: this.pwdInfo.newPwd,
                            password: this.pwdInfo.oldPwd,
                        }, (res) => {
                            this.$Message.success('修改成功')
                            sessionStorage.clear()
                            this.$router.push('/')
                        }, this)
                    } else {
                        this.$Message.error('请认真填写表单信息')
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields()
            }
        }
    }
</script>

<style scoped>
    .ipt {
        width: 500px;
    }

    .form {
        margin: 60px 0 10px 200px;
    }
</style>
